<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript">
        function closeWin(){
            api.closeWin({
            });
        };
    </script>
</head>
<body>
   <!-- 头部 -->
   <header class="aui-bar aui-bar-nav" id="topbar">
    <a class="aui-pull-left aui-btn" onclick="closeWin()">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">注册</div>
</header>

<div class="register">
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        用户昵称
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入昵称"  id="user_name">
                    </div>
                    <div class="check" id="checkNickName"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        手机号
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入您的手机号码"  id="mobile">
                    </div>
                    <div class="check" id="checkPhoneNumber"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        验证码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" class="text" placeholder="请输入验证码" onkeyup="checkCaptcha();" id="sms_code">
                        <div type="submit" class="aui-btn active" onclick="sendCaptcha();" id="sendCodeBtn">发送验证码</div>
                        <div class="check" id="checkCaptcha"></div>
                    </div>
                </div>
                
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        登录密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="请输入密码" id="user_pwd">
                    </div>
                    <div class="check" id="checkPSW"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        确认密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="请确认密码" id="user_pwd_confirm">
                    </div>
                    <div class="check" id="checkPSW_2"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        邀请码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="选填" id="referer">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        客户经理ID
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="选填" id="manager">
                    </div>
                </div>
            </li>
        </ul>
        <div class="register-d">
            <!-- <span class="aui-pull-left">忘记密码</span> -->
            <!-- <span class="aui-pull-right" tapmode onclick="toLogin();">登录</span> -->
        </div>
        <div class="register-btn" onclick="register();">立即注册</div>
    </div>
</div>

</body>
<script type="text/javascript">

    apiready = function(){
        lastCaptcha = '';
    }
    

    // 发送验证码
    function sendCaptcha(){

        var mobile = $api.byId('mobile');
        var mobileValue = mobile.value;

        checkMobile(mobileValue);
    };

    // 获取验证码
    function checkMobile(mobileValue) {

        var re = /^1\d{10}$/
        if (re.test(mobileValue)) {

            // 手机号码符合要求后开始倒计时
            var time = 60;
            var sendCodeBtn = $api.byId('sendCodeBtn');
            var timer = setInterval(function(){    
                time--;
                $api.removeCls(sendCodeBtn, 'active');
                sendCodeBtn.innerText = time + " 秒";
                sendCodeBtn.removeAttribute('onclick');
                if (time==0) {
                  time = 60;
                  clearInterval(timer); 
                  $api.addCls(sendCodeBtn, 'active');
                  sendCodeBtn.innerText = "发送验证码";
                  sendCodeBtn.setAttribute('onclick',"sendCaptcha();");
              }
          },1000);
            api.ajax({
                url: webAddress + '/index.php?ctl=app_user_center&act=get_register_verify_code_mobile',
                method: 'post',
                data: {
                    values: { 
                        user_mobile: mobileValue,
                    },
                }
            },function(ret, err){
                if (ret) {

                    if (ret.status == 0) {
                        alert(ret.info);
                        return false;
                    }else{
                        var captcha = ret.code;
                        captchaSend(mobileValue,captcha);
                    }
                } else {

                    alert(err.msg);
                }
            });
        } else {
            alert("请输入正确的手机号");
            var mobile = $api.byId('mobile');
            mobile.focus();
        }
    }

    // 发送验证码
    function captchaSend(mobileValue,captcha){
        // alert(mobileValue);
        // alert(captcha);
        // 将最终收到的验证码定义成全局变量
        lastCaptcha = captcha;
        api.ajax({
            url: webAddress + '/sendmsg/SendTemplateSMS.php',
            method: 'post',
            data: {
                values: { 
                    mobile: mobileValue,
                    code: captcha,
                },
            }
        },function(ret, err){
            if (ret) {
            } else {
                // 逻辑在这里写
                var sms_code = $api.byId('sms_code');
                sms_code.focus();
            }
        });
    };

    // 校验验证码
    function checkCaptcha(){

        var sms_codeEle = $api.byId('sms_code');
        var sms_codeValue = sms_code.value;
        var sms_codeLength = sms_codeValue.length;
        if (sms_codeLength == 6) {
            if (sms_codeValue == lastCaptcha) {
                $api.byId('checkCaptcha').innerText = '验证码正确';
            }else{
                $api.byId('checkCaptcha').innerText = '验证码错误';
            }
        }else{
            $api.byId('checkCaptcha').innerText = '验证码错误';
        }
    }

    // 注册
    function register(){
        // 用户昵称
        var user_name = $api.byId('user_name');
        var user_nameValue = user_name.value;
        // 手机号
        var mobile = $api.byId('mobile');
        var mobileValue = mobile.value;
        // 验证码
        var sms_code = $api.byId('sms_code');
        var sms_codeValue = sms_code.value;
        // 密码
        var user_pwd = $api.byId('user_pwd');
        var user_pwdValue = user_pwd.value;
        // 确认密码
        var user_pwd_confirm = $api.byId('user_pwd_confirm');
        var user_pwd_confirmValue = user_pwd_confirm.value;
        // 邀请码
        var referer = $api.byId('referer');
        var refererValue = referer.value;
        // 经理ID
        var manager = $api.byId('manager');
        var managerValue = manager.value;

        // 密码不能为空
        if (!user_nameValue) {
            $api.byId('checkNickName').innerText = '昵称不能为空';
            return false;
        }else{
            $api.byId('checkNickName').innerText = '';
        }
        // 验证验证码
        if (sms_codeValue != lastCaptcha) {
            $api.byId('checkCaptcha').innerText = '验证码错误';
            return false;
        }else{
            $api.byId('checkCaptcha').innerText = '';
        }
        // 密码不能为空
        if (!user_pwdValue) {
            $api.byId('checkPSW').innerText = '密码不能为空';
            return false;
        }else{
            $api.byId('checkPSW').innerText = '';
        }
        // 再次输入密码不能为空
        if (!user_pwd_confirmValue) {
            $api.byId('checkPSW_2').innerText = '请再次输入密码';
            return false;
        }else{
            // 两次密码输入是否相同
            if (user_pwdValue != user_pwd_confirmValue) {
                $api.byId('checkPSW_2').innerText = '两次密码输入不一致';
                return false;
            }else{
                $api.byId('checkPSW_2').innerText = '';
            }
        }


        api.ajax({
            url: webAddress + '/index.php?ctl=app_user_center&act=doregister',
            method: 'post',
            data: {
                values: { 
                    user_group: 0,
                    user_name: user_nameValue,
                    mobile: mobileValue,
                    sms_code: sms_codeValue,
                    user_pwd: user_pwdValue,
                    user_pwd_confirm: user_pwd_confirmValue,
                    referer: refererValue,
                    manager: managerValue,
                },
            }
        },function(ret, err){
            if (ret) {
                // var ret = $api.jsonToStr(ret);
                // alert(ret);
                if (ret.status == 0) {
                    alert(ret.info);
                    return false;
                }else{
                    var userid = ret.userid;
                    $api.setStorage('userid', userid);
                    // 注册成功后的逻辑
                    var gotoUser = 'gotoUser();';
                    api.execScript({
                        name: 'home',
                        script: gotoUser,
                    });
                    api.closeToWin({
                        name: 'home'
                    });
                }
            } else {

                alert(err.msg);
            }
        });
    };

    function toLogin(){
        api.closeWin();
    }
    
</script>
</html>